<template>
  <div class="user">
    <h2>user views</h2>
    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
    <h2>level: {{ level }}</h2>
    <button @click="changeState">修改store</button>
    <button @click="resetState">重置store</button>
  </div>
</template>

<script setup>
import useUser from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUser()
const { name, age, level } = storeToRefs(userStore)

function changeState() {
  // 一个一个修改
  /* userStore.name = 'kobe'
  userStore.age = 23
  userStore.level = 200 */

  // 一次性修改
  /*  userStore.$patch({
    name: 'kobe',
    age: 23,
    level: 200,
  }) */

  // 替换store
  userStore.$state = {
    name: 'kobe',
    age: 23,
    level: 200,
  }
  // name.value = 'zs'
}

function resetState() {
  // 重置store
  userStore.$reset()
}
</script>

<style scoped></style>
